<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逗游吧后台框架</title>
    <% include ../include/docs-link %>
</head>
<body class="wrapper-body">
<% include ../include/docs-header %>
<div class="wrapper-container">
    <div class="container-fluid">
        <div class="row no-gutter">
            <div class="col-2">
                <% include ../include/docs-nav %>
            </div>
            <div class="col-10">
                <div class="wrapper-content">
                    <article class="wrapper-article">
                        <h1>Input 输入框</h1>
                        <div class="anchor">
                            <h2 id="概述">概述</h2>
                            <a href="#概述">#</a>
                        </div>
                        <p>用清晰的层级结构展示信息，可展开或折叠。</p>
                        <div class="anchor">
                            <h2 id="Tree 树形控件">Tree 树形控件</h2>
                            <a href="#Tree 树形控件">#</a>
                        </div>
                        <div class="example">
                            <div class="example-case">
                                <div id="tree"></div>
                            </div>
                            <div class="example-code">
    <pre><code class="js">
    var treeData = [
        {
            text: 'Parent 1',
            href: '#parent1',
            tags: ['4'],
            nodes: [
                {
                    text: 'Child 1',
                    href: '#child1',
                    tags: ['2'],
                    nodes: [
                        {
                            text: 'Grandchild 1',
                            href: '#grandchild1',
                            tags: ['0']
                        },
                        {
                            text: 'Grandchild 2',
                            href: '#grandchild2',
                            tags: ['0']
                        }
                    ]
                },
                {
                    text: 'Child 2',
                    href: '#child2',
                    tags: ['0']
                }
            ]
        },
        {
            text: 'Parent 2',
            href: '#parent2',
            tags: ['0']
        },
        {
            text: 'Parent 3',
            href: '#parent3',
            tags: ['0']
        },
        {
            text: 'Parent 4',
            href: '#parent4',
            tags: ['0']
        },
        {
            text: 'Parent 5',
            href: '#parent5'  ,
            tags: ['0']
        }
    ];

    $('#tree').treeview({
        checkedIcon: 'glyphicon glyphicon-folder-close',
        emptyIcon: 'glyphicon glyphicon-file',
        expandIcon: "glyphicon glyphicon-triangle-right",
        collapseIcon: "glyphicon glyphicon-triangle-bottom",
        uncheckedIcon: 'glyphicon glyphicon-unchecked',
        color: "#000",
        backColor: "#fff",
        borderColor: "#eee",
        showBorder: true,
        showTags: true,
        showCheckbox: false,
        highlightSelected: true,
        multiSelect: false,
        selectedColor: "#fff",
        selectedBackColor: "#20a0ff",
        data: treeData
    });
    </code></pre>
                            </div>
                            <div class="example-code-more">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                                <span>Show Code</span>
                            </div>
                        </div>
                        <div class="anchor">
                            <h2 id="参数">参数</h2>
                            <a href="参数">#</a>
                        </div>
                        <div class="example">
                            <div class="example-case">
                                <h2>节点属性</h2>
                                <p>下面的参数可用于树节点的属性定义，如节点的文本、颜色和标签等。</p>
                                <table class="table table-hover table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th>参数名称</th>
                                            <th>参数类型</th>
                                            <th>参数描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>text</td>
                                        <td>String(必选项)</td>
                                        <td>列表树节点上的文本，通常是节点右边的小图标。</td>
                                    </tr>
                                    <tr>
                                        <td>icon</td>
                                        <td>String(可选项)</td>
                                        <td>列表树节点上的图标，通常是节点左边的图标。</td>
                                    </tr>
                                    <tr>
                                        <td>selectedIcon</td>
                                        <td>String(可选项)</td>
                                        <td>当某个节点被选择后显示的图标，通常是节点左边的图标。</td>
                                    </tr>
                                    <tr>
                                        <td>href</td>
                                        <td>String(可选项)</td>
                                        <td>结合全局enableLinks选项为列表树节点指定URL。</td>
                                    </tr>
                                    <tr>
                                        <td>selectable</td>
                                        <td>Boolean. Default: true</td>
                                        <td>指定列表树的节点是否可选择。设置为<code>false</code>将使节点展开，并且不能被选择。</td>
                                    </tr>
                                    <tr>
                                        <td>state</td>
                                        <td>Object(可选项)</td>
                                        <td>一个节点的初始状态。</td>
                                    </tr>
                                    <tr>
                                        <td>state.checked</td>
                                        <td>Boolean，默认值<code>false</code></td>
                                        <td>指示一个节点是否处于checked状态，用一个checkbox图标表示。</td>
                                    </tr>
                                    <tr>
                                        <td>state.disabled</td>
                                        <td>Boolean，默认值<code>false</code></td>
                                        <td>指示一个节点是否处于disabled状态。（不是selectable，expandable或checkable）</td>
                                    </tr>
                                    <tr>
                                        <td>state.expanded</td>
                                        <td>Boolean，默认值<code>false</code></td>
                                        <td>指示一个节点是否处于展开状态。</td>
                                    </tr>
                                    <tr>
                                        <td>state.selected</td>
                                        <td>Boolean，默认值<code>false</code></td>
                                        <td>指示一个节点是否可以被选择。</td>
                                    </tr>
                                    <tr>
                                        <td>color</td>
                                        <td>String. Optional</td>
                                        <td>节点的前景色，覆盖全局的前景色选项。</td>
                                    </tr>
                                    <tr>
                                        <td>backColor</td>
                                        <td>String. Optional</td>
                                        <td>节点的背景色，覆盖全局的背景色选项。</td>
                                    </tr>
                                    <tr>
                                        <td>tags</td>
                                        <td>Array of Strings. Optional</td>
                                        <td>通过结合全局showTags选项来在列表树节点的右边添加额外的信息。</td>
                                    </tr>
                                    </tbody>
                                </table>
                                <h2>全局参数</h2>
                                <p>参数可以定制treeview的默认外观和行为。参数使用一个对象来在插件初始化时传入。</p>
                                <br />
                                <table class="table table-hover table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th>参数名称</th>
                                            <th>参数类型</th>
                                            <th>默认值</th>
                                            <th>描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>data</td>
                                        <td>Array of Objects</td>
                                        <td>无</td>
                                        <td>列表树上显示的数据。</td>
                                    </tr>
                                    <tr>
                                        <td>backColor</td>
                                        <td>String</td>
                                        <td>
                                            <a href="http://www.w3schools.com/cssref/css_colors_legal.asp" target="_blank">所有合法的颜色值</a>，Default: inherits from Bootstrap.css。</td>
                                        <td>设置所有列表树节点的背景颜色。</td>
                                    </tr>
                                    <tr>
                                        <td>borderColor</td>
                                        <td>String</td>
                                        <td>
                                            <a href="http://www.w3schools.com/cssref/css_colors_legal.asp" target="_blank">所有合法的颜色值</a>，Default: inherits from Bootstrap.css。</td>
                                        <td>设置列表树容器的边框颜色，如果不想要边框可以设置<code>showBorder</code>属性为false。</td>
                                    </tr>
                                    <tr>
                                        <td>checkedIcon</td>
                                        <td>String：class名称</td>
                                        <td>
                                            <a href="http://getbootstrap.com/components/#glyphicons" target="_blank">Bootstrap Glyphicons</a>定义的 "glyphicon glyphicon-check"</td>
                                        <td>设置处于checked状态的复选框图标。</td>
                                    </tr>
                                    <tr>
                                        <td>collapseIcon</td>
                                        <td>String：class名称</td>
                                        <td>
                                            <a href="http://getbootstrap.com/components/#glyphicons" target="_blank">Bootstrap Glyphicons</a>定义的 "glyphicon glyphicon-minus"</td>
                                        <td>设置列表树可收缩节点的图标。</td>
                                    </tr>
                                    <tr>
                                        <td>color</td>
                                        <td>String</td>
                                        <td>
                                            <a href="http://www.w3schools.com/cssref/css_colors_legal.asp" target="_blank">所有合法的颜色值</a>，Default: inherits from Bootstrap.css。</td>
                                        <td>设置列表树所有节点的前景色。</td>
                                    </tr>
                                    <tr>
                                        <td>emptyIcon</td>
                                        <td>String：class名称</td>
                                        <td>
                                            <a href="http://getbootstrap.com/components/#glyphicons" target="_blank">Bootstrap Glyphicons</a>定义的"glyphicon"。</td>
                                        <td>设置列表树中没有子节点的节点的图标。</td>
                                    </tr>
                                    <tr>
                                        <td>enableLinks</td>
                                        <td>Boolean</td>
                                        <td>false</td>
                                        <td>是否使用当前节点的文本作为超链接。超链接的<code>href</code>值必须在每个节点的data结构中给出。</td>
                                    </tr>
                                    <tr>
                                        <td>expandIcon</td>
                                        <td>String：class名称</td>
                                        <td>
                                            <a href="http://getbootstrap.com/components/#glyphicons" target="_blank">Bootstrap Glyphicons</a>定义的 "glyphicon glyphicon-plus"</td>
                                        <td>设置列表树可展开节点的图标。</td>
                                    </tr>
                                    <tr>
                                        <td>highlightSearchResults</td>
                                        <td>Boolean</td>
                                        <td>true</td>
                                        <td>是否高亮搜索结果。</td>
                                    </tr>
                                    <tr>
                                        <td>highlightSelected</td>
                                        <td>Boolean</td>
                                        <td>true</td>
                                        <td>当选择节点时是否高亮显示。</td>
                                    </tr>
                                    <tr>
                                        <td>onhoverColor</td>
                                        <td>String</td>
                                        <td>
                                            <a href="http://www.w3schools.com/cssref/css_colors_legal.asp" target="_blank">所有合法的颜色值</a>， Default: '#F5F5F5'。</td>
                                        <td>设置列表树的节点在用户鼠标滑过时的背景颜色。</td>
                                    </tr>
                                    <tr>
                                        <td>levels</td>
                                        <td>Integer</td>
                                        <td>Default: 2</td>
                                        <td>设置继承树默认展开的级别。</td>
                                    </tr>
                                    <tr>
                                        <td>multiSelect</td>
                                        <td>Boolean</td>
                                        <td>false</td>
                                        <td>是否可以同时选择多个节点。</td>
                                    </tr>
                                    <tr>
                                        <td>nodeIcon</td>
                                        <td>String：class名称</td>
                                        <td>
                                            <a href="http://getbootstrap.com/components/#glyphicons" target="_blank">Bootstrap Glyphicons</a>定义的 "glyphicon glyphicon-stop"</td>
                                        <td>设置所有列表树节点上的默认图标。</td>
                                    </tr>
                                    <tr>
                                        <td>selectedIcon</td>
                                        <td>String：class名称</td>
                                        <td>
                                            <a href="http://getbootstrap.com/components/#glyphicons" target="_blank">Bootstrap Glyphicons</a>定义的 "glyphicon glyphicon-stop"</td>
                                        <td>设置所有被选择的节点上的默认图标。</td>
                                    </tr>
                                    <tr>
                                        <td>searchResultBackColor</td>
                                        <td>String</td>
                                        <td>
                                            <a href="http://www.w3schools.com/cssref/css_colors_legal.asp" target="_blank">所有合法的颜色值</a>， Default: undefined, inherits。</td>
                                        <td>设置搜索结果节点的背景颜色。</td>
                                    </tr>
                                    <tr>
                                        <td>searchResultColor</td>
                                        <td>String</td>
                                        <td>
                                            <a href="http://www.w3schools.com/cssref/css_colors_legal.asp" target="_blank">所有合法的颜色值</a>， Default: '#D9534F'</td>
                                        <td>设置搜索结果节点的前景颜色。</td>
                                    </tr>
                                    <tr>
                                        <td>selectedBackColor</td>
                                        <td>String</td>
                                        <td>
                                            <a href="http://www.w3schools.com/cssref/css_colors_legal.asp" target="_blank">所有合法的颜色值</a>， Default: '#428bca'</td>
                                        <td>设置被选择节点的背景颜色。</td>
                                    </tr>
                                    <tr>
                                        <td>selectedColor</td>
                                        <td>String</td>
                                        <td>
                                            <a href="http://www.w3schools.com/cssref/css_colors_legal.asp" target="_blank">所有合法的颜色值</a>， Default: '#FFFFFF'。</td>
                                        <td>设置列表树选择节点的背景颜色。</td>
                                    </tr>
                                    <tr>
                                        <td>showBorder</td>
                                        <td>Boolean</td>
                                        <td>true</td>
                                        <td>是否在节点上显示边框。</td>
                                    </tr>
                                    <tr>
                                        <td>showCheckbox</td>
                                        <td>Boolean</td>
                                        <td>false</td>
                                        <td>是否在节点上显示checkboxes。</td>
                                    </tr>
                                    <tr>
                                        <td>showIcon</td>
                                        <td>Boolean</td>
                                        <td>true</td>
                                        <td>是否显示节点图标。</td>
                                    </tr>
                                    <tr>
                                        <td>showTags</td>
                                        <td>Boolean</td>
                                        <td>false</td>
                                        <td>是否在每个节点右边显示tags标签。tag值必须在每个列表树的data结构中给出。</td>
                                    </tr>
                                    <tr>
                                        <td>uncheckedIcon</td>
                                        <td>String：class名称</td>
                                        <td>
                                            <a href="http://getbootstrap.com/components/#glyphicons" target="_blank">Bootstrap Glyphicons</a>定义的 "glyphicon glyphicon-unchecked"</td>
                                        <td style="word-break: break-all;">设置图标为未选择状态的checkbox图标。</td>
                                    </tr>
                                    </tbody>
                                </table>
                                <h2>treeview方法列表</h2>
                                <p>checkAll(options)：选择所有的节点。</p>
                                <pre>$('#tree').treeview('checkAll', { silent: true });</pre>
                                <h5>触发nodeChecked事件，传入silent来阻止其它事件。</h5>
                                <p>checkNode(node | nodeId, options)：选择指定的节点，接收节点或节点ID。</p>
                                <pre>$('#tree').treeview('checkNode', [ nodeId, { silent: true } ]);</pre>
                                <h5>触发nodeChecked事件，传入silent来阻止其它事件。</h5>
                                <p>clearSearch()：清空以前的搜索结果。例如清除它们的高亮状态。</p>
                                <pre>$('#tree').treeview('clearSearch');</pre>
                                <h5>触发searchCleared事件。</h5>
                                <p>collapseAll(options)：折叠所有的节点，折叠整个树。</p>
                                <pre>$('#tree').treeview('collapseAll', { silent: true });</pre>
                                <h5>触发nodeCollapsed事件，传入silent来阻止其它事件。</h5>
                                <p>collapseNode(node | nodeId, options)：折叠指定节点和它的子节点。如果不想折叠子节点，可以设置{ ignoreChildren: true }。</p>
                                <pre>$('#tree').treeview('collapseNode', [ nodeId, { silent: true, ignoreChildren: false } ]);</pre>
                                <h5>触发nodeCollapsed事件，传入silent来阻止其它事件。</h5>
                                <p>disableAll(options)：禁用所有的节点。</p>
                                <pre>$('#tree').treeview('disableAll', { silent: true });</pre>
                                <h5>触发nodeDisabled事件，传入silent来阻止其它事件。</h5>
                                <p>disableNode(node | nodeId, options)：禁用指定的节点，接收节点或节点ID。</p>
                                <pre>$('#tree').treeview('disableNode', [ nodeId, { silent: true } ]);</pre>
                                <h5>触发nodeDisabled事件，传入silent来阻止其它事件。</h5>
                                <p>enableAll(options)：启用所有的节点。</p>
                                <pre>$('#tree').treeview('enableAll', { silent: true });</pre>
                                <h5>触发nodeEnabled事件，传入silent来阻止其它事件。</h5>
                                <p>enableNode(node | nodeId, options)：启用指定的节点，接收节点或节点ID。</p>
                                <pre>$('#tree').treeview('enableNode', [ nodeId, { silent: true } ]);</pre>
                                <h5>触发nodeEnabled事件，传入silent来阻止其它事件。</h5>
                                <p>expandAll(options)：展开所有的树节点。也可以展开任何给定级别的树节点。</p>
                                <pre>$('#tree').treeview('expandAll', { levels: 2, silent: true });</pre>
                                <h5>触发nodeExpanded事件，传入silent来阻止其它事件。</h5>
                                <p>expandNode(node | nodeId, options)：展开指定的树节点，接收节点或节点ID。也可以展开任何给定级别的树节点。</p>
                                <pre>$('#tree').treeview('expandNode', [ nodeId, { levels: 2, silent: true } ]);</pre>
                                <h5>触发nodeExpanded事件，传入silent来阻止其它事件。</h5>
                                <p>getCollapsed()：返回折叠节点的数组。例如state.expanded = false。</p>
                                <pre>$('#tree').treeview('getCollapsed', nodeId);</pre>
                                <p>getDisabled()：返回被禁用节点的数组。</p>
                                <pre>$('#tree').treeview('getDisabled', nodeId);</pre>
                                <p>getEnabled()：返回可用节点的数组。</p>
                                <pre>$('#tree').treeview('getEnabled', nodeId);</pre>
                                <p>getExpanded()：返回所有展开节点的数组。</p>
                                <pre>$('#tree').treeview('getExpanded', nodeId);</pre>
                                <p>getNode(nodeId)：返回给定节点ID的单一节点对象。</p>
                                <pre>$('#tree').treeview('getNode', nodeId);</pre>
                                <p>getParent(node | nodeId)：返回给定节点的父节点，如果没有则返回undefined。</p>
                                <pre>$('#tree').treeview('getParent', node);</pre>
                                <p>getSelected()：返回所有被选择节点的数组，例如：state.selected = true。</p>
                                <pre>$('#tree').treeview('getSelected', nodeId);</pre>
                                <p>getSiblings(node | nodeId)：返回给定节点的兄弟节点的数组，如果没有则返回undefined。</p>
                                <pre>$('#tree').treeview('getSiblings', node);</pre>
                                <p>getUnselected()：返回没有被选择节点的数组。例如：state.selected = false。</p>
                                <pre>$('#tree').treeview('getUnselected', nodeId);</pre>
                                <p>remove()：移除列表树容器。移除附加的事件、附加对象和额外的html元素。</p>
                                <pre>$('#tree').treeview('remove');</pre>
                                <p>revealNode(node | nodeId, options)：显示一个树节点，展开从这个节点开始到根节点的所有节点。</p>
                                <pre>$('#tree').treeview('revealNode', [ nodeId, { silent: true } ]);</pre>
                                <h5>触发nodeExpanded事件，传入silent来阻止其它事件。</h5>
                                <p>search(pattern, options)：搜索匹配是非常的指定树节点，并高亮它们。返回配平节点的数组。</p>
                                <pre>$('#tree').treeview('search', [ 'Parent', {
  ignoreCase: true,     // case insensitive
  exactMatch: false,    // like or equals
  revealResults: true,  // reveal matching nodes
}]);</pre>
                                <h5>触发searchComplete事件。</h5>
                                <p>selectNode(node | nodeId, options)：选择一个给定的树节点，接收节点或节点ID。</p>
                                <pre>$('#tree').treeview('selectNode', [ nodeId, { silent: true } ]);</pre>
                                <h5>触发nodeSelected事件，传入silent来阻止其它事件。</h5>
                                <p>toggleNodeChecked(node | nodeId, options)：切换节点的Check状态。</p>
                                <pre>$('#tree').treeview('toggleNodeChecked', [ nodeId, { silent: true } ]);</pre>
                                <h5>触发nodeChecked事件或nodeUnchecked事件，传入silent来阻止其它事件。</h5>
                                <p>toggleNodeDisabled(node | nodeId, options)：切换一个节点的可用和不可用状态。</p>
                                <pre>$('#tree').treeview('toggleNodeDisabled', [ nodeId, { silent: true } ]);</pre>
                                <h5>触发nodeDisabled事件或nodeEnabled事件，传入silent来阻止其它事件。</h5>
                                <p>toggleNodeExpanded(node | nodeId, options)：切换一个节点的展开和折叠状态。</p>
                                <pre>$('#tree').treeview('toggleNodeExpanded', [ nodeId, { silent: true } ]);</pre>
                                <h5>触发nodeExpanded事件或nodeCollapsed事件，传入silent来阻止其它事件。</h5>
                                <p>toggleNodeSelected(node | nodeId, options)：切换一个节点的选择状态。</p>
                                <pre>$('#tree').treeview('toggleNodeSelected', [ nodeId, { silent: true } ]);</pre>
                                <h5>触发nodeSelected事件或nodeUnselected事件，传入silent来阻止其它事件。</h5>
                                <p>uncheckAll(options)：Uncheck所有的节点。</p>
                                <pre>$('#tree').treeview('uncheckAll', { silent: true });</pre>
                                <h5>触发nodeUnchecked事件，传入silent来阻止其它事件。</h5>
                                <p>uncheckNode(node | nodeId, options)：Uncheck一个给定的节点，接收节点或节点ID。</p>
                                <pre>$('#tree').treeview('uncheckNode', [ nodeId, { silent: true } ]);</pre>
                                <h5>触发nodeUnchecked事件，传入silent来阻止其它事件。</h5>
                                <p>unselectNode(node | nodeId, options)：不选择指定的节点，接收节点或节点ID。</p>
                                <pre>$('#tree').treeview('unselectNode', [ nodeId, { silent: true } ]);</pre>
                                <h5>触发nodeUnselected事件，传入silent来阻止其它事件。</h5>
                                <h2>事件</h2>
                                <p>你可以在参数中使用回调函数来绑定任何事件，或者使用标准的jQuery .on()方法来绑定事件。</p>
                                <p>在参数中调用的示例：</p>
                                <pre><code class="js">
    $('#tree').treeview({
      // The naming convention for callback's is to prepend with `on`
      // and capitalize the first letter of the event name
      // e.g. nodeSelected -> onNodeSelected
      onNodeSelected: function(event, data) {
        // 事件代码...
    });
                                </code></pre>
                                <p>使用jQuery .on方法：</p>
                                <pre><code class="js">
    $('#tree').on('nodeSelected', function(event, data) {
      // 事件代码...
    });
                                </code></pre>
                                <h2>可用事件列表</h2>
                                <ul>
                                    <li>nodeChecked (event, node)：一个节点被checked。</li>
                                    <li>nodeCollapsed (event, node)：一个节点被折叠。</li>
                                    <li>nodeDisabled (event, node)：一个节点被禁用。</li>
                                    <li>nodeEnabled (event, node)：一个节点被启用。</li>
                                    <li>nodeExpanded (event, node)：一个节点被展开。</li>
                                    <li>nodeSelected (event, node)：一个节点被选择。</li>
                                    <li>nodeUnchecked (event, node)：一个节点被unchecked。</li>
                                    <li>nodeUnselected (event, node)：取消选择一个节点。</li>
                                    <li>searchComplete (event, results)：搜索完成之后触发。</li>
                                    <li>searchCleared (event, results)：搜索结果被清除之后触发。</li>
                                </ul>
                            </div>
                        </div>
                    </article>
                </div>
            </div>
        </div>
    </div>
</div>
<% include ../include/docs-footer %>
<script>
    var treeData = [
        {
            text: 'Parent 1',
            href: '#parent1',
            tags: ['4'],
            nodes: [
                {
                    text: 'Child 1',
                    href: '#child1',
                    tags: ['2'],
                    nodes: [
                        {
                            text: 'Grandchild 1',
                            href: '#grandchild1',
                            tags: ['0']
                        },
                        {
                            text: 'Grandchild 2',
                            href: '#grandchild2',
                            tags: ['0']
                        }
                    ]
                },
                {
                    text: 'Child 2',
                    href: '#child2',
                    tags: ['0']
                }
            ]
        },
        {
            text: 'Parent 2',
            href: '#parent2',
            tags: ['0']
        },
        {
            text: 'Parent 3',
            href: '#parent3',
            tags: ['0']
        },
        {
            text: 'Parent 4',
            href: '#parent4',
            tags: ['0']
        },
        {
            text: 'Parent 5',
            href: '#parent5'  ,
            tags: ['0']
        }
    ];

    $('#tree').treeview({
        checkedIcon: 'glyphicon glyphicon-folder-close',
        emptyIcon: 'glyphicon glyphicon-file',
        expandIcon: "glyphicon glyphicon-triangle-right",
        collapseIcon: "glyphicon glyphicon-triangle-bottom",
        uncheckedIcon: 'glyphicon glyphicon-unchecked',
        color: "#000",
        backColor: "#fff",
        borderColor: "#eee",
        showBorder: true,
        showTags: true,
        showCheckbox: false,
        highlightSelected: true,
        multiSelect: false,
        selectedColor: "#fff",
        selectedBackColor: "#20a0ff",
        data: treeData
    });
</script>
</body>
</html>